<template>
    <div>
        <kt-header title="测试页面3">
            <kt-toolbar show-autoback>
                <el-button type="text" icon="el-icon-edit">保存</el-button>
            </kt-toolbar>
        </kt-header>
        <kt-content>
            <el-form ref="editForm" class="kt-portal-form" :model="editForm" label-position="left" label-width="75px" v-loading="loading"  size="small">
                <kt-section id="nav1" title="基本信息">
                    <el-row :gutter="40" type="flex">
                        <el-col :span="8">
                            <el-form-item label="类别A" prop="Title">
                                <el-input v-model="editForm.Title"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="类别B" prop="ArticleContent">
                                <el-input v-model="editForm.ArticleContent"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="类别C" prop="Author">
                                <el-input v-model="editForm.Author"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="40" type="flex">
                        <el-col :span="8">
                            <el-form-item label="内容" prop="Createdon">
                                <el-input v-model="editForm.Createdon"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="时间" prop="LastUpdateTime">
                                <el-date-picker v-model="editForm.LastUpdateTime" type="datetime" placeholder="选择日期时间" style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </kt-section>
                <kt-section id="nav2" title="明细数据">
                    <template slot="toolbar">
                        <el-button type="text" icon="el-icon-edit">保存</el-button>
                        <el-button type="text" icon="el-icon-edit">保存</el-button>
                    </template>
                    <el-table ref="gridTable" v-bind:data="detailDate" row-key="" stripe>
                        <el-table-column type="selection" width="35">
                        </el-table-column>
                        <el-table-column prop="" label="费用类型" align="center"></el-table-column>
                        <el-table-column prop="" label="关联单号" align="center"></el-table-column>
                        <el-table-column prop="" label="应付金额" align="center"></el-table-column>
                        <el-table-column prop="" label="备注说明" align="center"></el-table-column>
                    </el-table>
                </kt-section>
            </el-form>
        </kt-content>
    </div>
</template>

<script>
export default {
  data() {
    return {
      detailDate: [],
      loading: "",
      editForm: {
        Title: "",
        ArticleContent: "",
        Author: "",
        Createdon: "",
        LastUpdateTime: ""
      }
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      try {
        var requestStr = "/api/Article/GetAllArticle";

        this.loading = true;
        kt.post(requestStr)
          .then(res => {
            this.editForm = res.PostData;
            this.loading = false;
          })
          .catch(error => {
            kt.showErrorToast(error);
            this.loading = false;
          });
      } catch (error) {
        kt.showErrorToast(error);
        this.loading = false;
      }
    }
  }
};
</script>